<template>
	<view class="Lottery">
		<div class="Lottery_top_title"></div>
		<div class="Lottery_top_tisp">每月前三名都可获得一次抽奖机会</div>
		<div class="Lottery_top_turntable">
			<image width="700" mode="widthFix" src="https://www.ry1688.com/h5/images/Lottery/turntable.png"></image>
			<div class="turntable_spin" :animation="animationData">
				<div
					class="turntable_spin_item"
					v-for="(item, index) in 6"
					:style="'transform: rotate(' + (index - 1) * 60 + 'deg) translateX(-50%) translateY(-50%) translate(100px)'"
				>
					<div class="item_view">
						{{ index }}
					</div>
				</div>
			</div>
			<div class="turntable_spin_active"></div>
			<div class="turntable_spin_btn" @click="drawClick"></div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 中奖的产品索引
			prizeIndex: 1,
			// 导出的动画函数
			animationData: {},
			//动画函数
			animation: null
		};
	},
	methods: {
		drawClick() {
			console.log(1);
			//旋转角度
			let rota = (Math.abs(this.prizeIndex - 6) % 6) * 60;

			//创建动画
			this.animation = uni.createAnimation({
				// 动画持续时间
				duration: 3000,
				//定义动画的效果
				timingFunction: 'ease-in-out'
			});
			//设置旋转角度
			this.animation.rotate(rota + 3600).step();
			this.animationData = this.animation.export();
		}
	}
};
</script>

<style lang="scss">
.Lottery {
	width: 100vw;
	height: 100vh;
	display: flex;
	padding-top: 200rpx;
	text-align: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	background-size: 100% 100%;
	background-image: url('https://www.ry1688.com/h5/images/Lottery/background.png');

	.Lottery_top_title {
		width: 80%;
		height: 140rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url('https://www.ry1688.com/h5/images/Lottery/top_title.png');
	}

	.Lottery_top_tisp {
		color: #ec7240;
		font-weight: 700;
		margin-top: 40rpx;
		letter-spacing: 1px;
		padding: 10rpx 20rpx;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffffc0 50%, rgba(0, 0, 0, 0));
	}

	.Lottery_top_turntable {
		margin-top: 80rpx;
		position: relative;

		.image {
		}

		.turntable_spin {
			top: 117rpx;
			left: 126rpx;
			width: 450rpx;
			height: 450rpx;
			position: absolute;
			border-radius: 50%;
			border-radius: 50%;
			background-size: 100% 100%;
			background-image: url('https://www.ry1688.com/h5/images/Lottery/turntable_spin.png');

			.turntable_spin_item {
				top: 40%;
				left: 40%;
				width: 50px;
				height: 50px;
				z-index: 99999;
				position: absolute;

				.item_view {
					transform: rotate(60deg);
					transform-origin: center center;
				}
			}
		}

		.turntable_spin_btn {
			top: 230rpx;
			left: 260rpx;
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('https://www.ry1688.com/h5/images/Lottery/spin_btn.png');
		}

		.turntable_spin_active {
			top: 68rpx;
			left: 207rpx;
			width: 300rpx;
			height: 236rpx;
			position: absolute;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('https://www.ry1688.com/h5/images/Lottery/turntable_active.png');
		}
	}
}
</style>
